<template>
  <div class="collection-table-container">
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      height="100%"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      
      <el-table-column prop="orderInfo.platformOrderId" label="订单号" min-width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="viewOrderDetail(row.orderInfo.platformOrderId)">
            {{ row.orderInfo.platformOrderId }}
          </el-link>
        </template>
      </el-table-column>
      
      <el-table-column prop="orderInfo.amount" label="订单金额" min-width="100">
        <template #default="{ row }">
          ¥{{ row.orderInfo.amount.toFixed(2) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="orderInfo.orderDate" label="订单日期" min-width="120">
        <template #default="{ row }">
          {{ formatDate(row.orderInfo.orderDate) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="customerInfo.name" label="客户名称" min-width="120" />
      
      <el-table-column prop="customerInfo.contactPerson" label="联系人" min-width="100" />
      
      <el-table-column prop="collectionInfo.method" label="催款方式" min-width="100">
        <template #default="{ row }">
          <el-tag :type="getCollectionMethodType(row.collectionInfo.method)">
            {{ getCollectionMethodLabel(row.collectionInfo.method) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="collectionInfo.result" label="催款结果" min-width="150" show-overflow-tooltip />
      
      <el-table-column prop="collectionInfo.collectionTime" label="催款时间" min-width="120">
        <template #default="{ row }">
          {{ formatDate(row.collectionInfo.collectionTime) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="collectionInfo.operator" label="操作人" min-width="100" />
      
      <el-table-column prop="collectionInfo.nextFollowupDate" label="下次跟进" min-width="120">
        <template #default="{ row }">
          <span :class="{ 'warning-text': isOverdue(row.collectionInfo.nextFollowupDate) }">
            {{ formatDate(row.collectionInfo.nextFollowupDate) }}
          </span>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
          <el-button link type="primary" @click="editRecord(row)">编辑</el-button>
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-button link type="primary">
              更多<el-icon><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
                <el-dropdown-item command="export">导出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface CollectionRecord {
  id: string
  orderInfo: {
    platformOrderId: string
    amount: number
    orderDate: string
  }
  customerInfo: {
    name: string
    contactPerson: string
    phone: string
    email: string
  }
  collectionInfo: {
    collectionId: string
    method: string
    duration: number
    result: string
    collectionTime: string
    operator: string
    notes: string
    isBatch: boolean
    nextFollowupDate: string
    satisfactionScore: number
  }
}

interface Props {
  tableData: CollectionRecord[]
  loading: boolean
  pagination: {
    page: number
    limit: number
    total: number
  }
  selectedRecords: CollectionRecord[]
  showAdvancedFilter: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'selection-change', selection: CollectionRecord[]): void
  (e: 'view-detail', record: CollectionRecord): void
  (e: 'edit', record: CollectionRecord): void
  (e: 'refresh'): void
  (e: 'update:query-params', params: any): void
}>()

const handleSelectionChange = (selection: CollectionRecord[]) => {
  emit('selection-change', selection)
}

const viewDetail = (row: CollectionRecord) => {
  emit('view-detail', row)
}

const editRecord = (row: CollectionRecord) => {
  emit('edit', row)
}

const handleCommand = (command: string, row: CollectionRecord) => {
  switch (command) {
    case 'delete':
      deleteRecord(row)
      break
    case 'export':
      exportRecord(row)
      break
  }
}

const deleteRecord = (row: CollectionRecord) => {
  ElMessageBox.confirm(`确定要删除催款记录 ${row.collectionInfo.collectionId} 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    // 模拟删除操作
    ElMessage.success('删除成功')
    emit('refresh')
  }).catch(() => {
    // 取消删除
  })
}

const exportRecord = (row: CollectionRecord) => {
  // 模拟导出操作
  ElMessage.info('导出功能开发中')
}

const viewOrderDetail = (orderId: string) => {
  ElMessage.info(`查看订单 ${orderId} 详情`)
}

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

const getCollectionMethodType = (method: string) => {
  const typeMap: Record<string, string> = {
    phone: 'primary',
    email: 'success',
    visit: 'warning'
  }
  return typeMap[method] || 'info'
}

const getCollectionMethodLabel = (method: string) => {
  const labelMap: Record<string, string> = {
    phone: '电话',
    email: '邮件',
    visit: '上门'
  }
  return labelMap[method] || method
}

const isOverdue = (dateString: string) => {
  if (!dateString) return false
  const date = new Date(dateString)
  const now = new Date()
  return date < now
}
</script>

<style scoped lang="scss">
.collection-table-container {
  margin-bottom: 20px;
  
  .warning-text {
    color: #e6a23c;
    font-weight: bold;
  }
}
</style>